《高性能網(wǎng)站建設指南》閱讀筆記_規則1－減少HTTP請求
發(fā)布時(shí)間：2013-11-22 瀏覽：451打印字號：大中小
序言：
可能很多人跟我們一樣，一直以為性能主要是后端問(wèn)題。但是這本書(shū)中的實(shí)例表明，前端問(wèn)題可能消耗掉整體時(shí)間的80%到90%，而只有10%到20%的時(shí)間花在了下載HTML文檔上。一般我們認為前端性能無(wú)非就是堅持使用外部的CSS和JS，盡量減少CSS和JS引用的數量，還有對JS的壓縮。但是這本書(shū)告訴我們，我們要做的工作遠不止這些。
本書(shū)按照優(yōu)先級順序介紹了14個(gè)性能規則。但是并非每個(gè)規則都要應用于每個(gè)網(wǎng)站，也不是每個(gè)網(wǎng)站都應該按照同一種方式運用一個(gè)規則，但是每個(gè)規則都值得考慮。
我們自己做了下實(shí)驗：
百度：0.013/0.075=17% 0.014/0.040=35%
page speed 評分：99
淘車(chē)買(mǎi)車(chē)首頁(yè)：0.699/7.559=9% 0.667/2.978=22%
page speed 評分：68
淘車(chē)網(wǎng)車(chē)源列表頁(yè)：0.057/4.734=1.2% 0.055/2.112=2.6%
page speed 評分：84
二手車(chē)之家車(chē)源列表頁(yè)：0.068/2.164=3% 0.063/1.183=5%
page speed 評分：82
我們的問(wèn)題大概在一下這幾個(gè)方面：
啟用 Keep-Alive
由同一網(wǎng)址提供資源
將圖片組合為 CSS貼圖定位
優(yōu)化圖片
我們做到了：
暫緩 JavaScript解析
壓縮 JavaScript
壓縮 CSS
壓縮 HTML
指定圖片大小
將查詢(xún)字符串從靜態(tài)資源中刪除
優(yōu)化樣式表和腳本的排列順序
使用瀏覽器緩存
使目標網(wǎng)頁(yè)重定向可緩存
內嵌小型 CSS
內嵌小型 JavaScript
啟用壓縮
將 CSS放在文檔標頭處
將圖片組合為 CSS貼圖定位
盡量減少請求的數據量
盡量減少重定向
指定字符集
請指定一個(gè)“Vary: Accept-Encoding”標頭
請指定緩存驗證工具
避免出現錯誤的請求
避免在 CSS中使用 @import
首選異步資源
下面是對以上提到的14條規則的具體介紹：
規則1－減少HTTP請求
既然有80％－90％的時(shí)間花在為HTML文檔所引用的所有組建（圖片，腳本，樣式表，Flash等）進(jìn)行的HTTP請求上，因此改善響應時(shí)間的最簡(jiǎn)單途徑就是減少組件的數量，并由此減少HTTP請求數量。這是最重要的原則，如果14條規則里只能選一條，那就是它了.
圖片地圖：如果用圖片做導航鏈接，我們們可以將多個(gè)圖片完成的功能，使用一個(gè)圖片，根據的不同區域來(lái)響應不應的請求。因為一個(gè)圖片只有一次HTTP請求，而多個(gè)圖片需要有多次請求。
CSS Sprites
原理同上，但比上面的更靈活
CSS Sprites方式處理例子：
書(shū)中的示例：
內聯(lián)圖片 是將簡(jiǎn)單圖片的編碼數據直接保存在URL自身之中。（需要內聯(lián)編碼技術(shù)）
合并腳本和樣式表：每個(gè)文件都會(huì )導致一個(gè)HTP請求，盡量將css和js合并到一個(gè)文件中；
把原有的多個(gè)樣式表文件合成一個(gè)，可以使用戶(hù)在瀏覽網(wǎng)頁(yè)時(shí)只需下載一個(gè)CSS文件。這樣減少了HTTP請求，速度自然就快了些。Javascript文件也一樣。不過(guò)這樣做似乎不符合模塊化的開(kāi)發(fā)原則。
